<template>
    <div id="dormitory">
    <div class="picture">
     <img :src="user.userInfo.value.headimgurl" alt="" style="width:200px;height:200px">
    </div>
    <el-descriptions title="我的中心" :column="2" border>
    <el-descriptions-item
      label="unid"
      align="center"
      label-class-name="my-label"
      class-name="my-content"
      width="150px"
      >{{user.userInfo.value.unid}}</el-descriptions-item
    >
    <el-descriptions-item label="账号"  align="center">{{ user.userInfo.value.username }}</el-descriptions-item>
    <el-descriptions-item
      label="vip等级"
      align="center"
      label-class-name="my-label"
      class-name="my-content"
      width="150px"
      >{{user.userInfo.value.vipLevel}}</el-descriptions-item
    >
    <el-descriptions-item label="vip到期时间" align="center">
        <el-tag style="background:#f56c6c;color:white;height:32px">
            {{ user.userInfo.value.vipExpires }}
        </el-tag>
    </el-descriptions-item>
    <el-descriptions-item
      label="昵称"
      align="center"
      label-class-name="my-label"
      class-name="my-content"
      width="150px"
      >
      <el-tag style="background:#67c23a;color:white;height:32px">
      {{user.userInfo.value.nickname}}
      </el-tag>
      </el-descriptions-item
    >
    <el-descriptions-item label="手机号" align="center">{{ user.userInfo.value.phone }}</el-descriptions-item>
    <el-descriptions-item
      label="角色名称"
      align="center"
      label-class-name="my-label"
      class-name="my-content"
      width="150px"
      >{{user.userInfo.value.roleName}}</el-descriptions-item
    >
    <el-descriptions-item label="性别" align="center"><el-tag >{{ user.userInfo.value.sex }}</el-tag></el-descriptions-item>
    <el-descriptions-item
      label="省份"
      align="center"
      label-class-name="my-label"
      class-name="my-content"
      width="150px"
      >{{user.userInfo.value.province}}</el-descriptions-item
    >
    <el-descriptions-item label="城市" align="center">{{ user.userInfo.value.city }}</el-descriptions-item>
   </el-descriptions>
    </div>
   </template>
   <script setup>
     import useUser from "@/store/user.js";
     import {onMounted} from 'vue'
     let user = useUser()
     onMounted(()=>{
       console.log(user.userInfo.value)
     })
   </script>
    <style scoped>
      .picture{
        width: 100%;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
 
    </style>